<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 09:50:03
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-01-10 15:40:31
 * @FilePath: \partal\src\views\project\index.vue
 * @Description: 项目案例
-->
<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  import Back from '@/components/Back'
  import datas from '@/config/project'

  const route = useRoute()

  const data = datas.find((item) => item.source === route.query.source)

  const column1 = data?.imgs.filter((_, i) => i % 4 === 0)
  const column2 = data?.imgs.filter((_, i) => i % 4 === 1)
  const column3 = data?.imgs.filter((_, i) => i % 4 === 2)
  const column4 = data?.imgs.filter((_, i) => i % 4 === 3)

  const showImg = (imgUrl: string) => window.open(imgUrl)
</script>

<template>
  <div class="project">
    <Back class="back"/>
    <p class="title">{{ data?.name }}</p>
    <div class="content">
      <div class="content-column">
        <img class="content-column-item" v-for="(item, i) in column1" :key="`content-column1-item${i}`" :src="item" @click="showImg(item)" />
      </div>
      <div class="content-column">
        <img class="content-column-item" v-for="(item, i) in column2" :key="`content-column2-item${i}`" :src="item" @click="showImg(item)" />
      </div>
      <div class="content-column">
        <img class="content-column-item" v-for="(item, i) in column3" :key="`content-column3-item${i}`" :src="item" @click="showImg(item)" />
      </div>
      <div class="content-column">
        <img class="content-column-item" v-for="(item, i) in column4" :key="`content-column4-item${i}`" :src="item" @click="showImg(item)" />
      </div>
    </div>
  </div>
</template>

<style type="less" scoped>
  .project {
    position: relative;
    width: 1200px;
    margin: auto;
    padding: 36px 0 108px 0;
    > .back {
      position: absolute;
      top: 48px;
      right: 0;
    }
    > .title {
      height: 45px;
      font-size: 36px;
      color: #1d2129;
      line-height: 45px;
    }
    > .content {
      margin-top: 40px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-column-gap: 16px;

      > .content-column {

        > .content-column-item {
          width: 288px;
          height: auto;
          margin-top: 16px;
          border-radius: 8px;
          border: 1px solid #e5e6eb;
          &:first-child {
            margin-top: 0;
          }
        }
      }
    }
  }
</style>
